<template>
  <div id="normal">
    <ul class="title">
      <li
        v-for="(item, index) in titleList"
        :key="index"
        :class="['title-item', { active: ckTitle == index }]"
        @click="selectTitle(index)"
      >
        {{ item }}
      </li>
    </ul>
    <div class="echarts" ref="main"></div>
    <div class="table">
      <h3>游客机详情</h3>
      <div class="query">
        <label class="query-title">查询游客机:</label>
        <el-input
          placeholder="输入游客机编号"
          v-model="tourInput"
          clearable
          size="small"
          @keyup.native="querybyNum"
          @clear="cancel"
        >
        </el-input>
      </div>
      <el-button type="primary" size="small" @click="addInfo"
        >新增游客机</el-button
      >
      <!-- visitorId -->
      <div class="tableShow">
        <el-table :data="tableData" border style="width: 100%" size="small">
          <el-table-column prop="visitorId" label="ID" width="100">
          </el-table-column>
          <el-table-column prop="visitorNumber" label="游客机编号" width="240">
          </el-table-column>
          <el-table-column prop="visitorTime" label="录入时间" width="240">
          </el-table-column>
          <el-table-column prop="visitorStatus" label="当前状态" width="240">
          </el-table-column>
          <el-table-column prop="visitorPerson" label="责任人" width="240">
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button
                type="text"
                size="small"
                @click="editStates(scope.row)"
                v-show="
                  scope.row.visitorStatus != '遗失' &&
                  scope.row.visitorStatus != '维修'
                "
                >修改</el-button
              >
            </template></el-table-column
          >
        </el-table>
        <el-pagination :total="total" @send="send"></el-pagination>
      </div>
    </div>
    <!-- 模态框 -->
    <el-dialog
      title="游客机信息"
      :visible.sync="dialogFormVisible"
      ref="addForm"
    >
      <el-form :model="addForm" :rules="rules">
        <el-form-item
          label="游客机编号"
          :label-width="formLabelWidth"
          prop="id"
        >
          <el-input
            v-model="addForm.id"
            autocomplete="请输入游客机编号"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item
          label="责任人姓名"
          :label-width="formLabelWidth"
          prop="name"
        >
          <el-input
            v-model="addForm.name"
            autocomplete="请输入责任人姓名"
            clearable
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="addSubmit">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 修改模态框 -->
    <el-modal
      :visible="editShow"
      :resource="row"
      :current="current"
      :size="size"
      @sendMsg="sendMsg"
    ></el-modal>
  </div>
</template>

<script>
import echarts from "@/echarts/index";
const Modal = () => import("../component/modal.vue");
import { tourList, getAllStatus, addDevice } from "@/network/api/device";
import Pagination from "@/components/Pagination.vue";
export default {
  components: {
    "el-pagination": Pagination,
    "el-modal": Modal,
  },
  data() {
    return {
      titleList: ["正常", "异常"],
      ckTitle: 0,
      tourInput: null, //游客机编号
      tableData: [],
      echartsData: [], //echarts数据
      chart: null,
      current: 1,
      size: 5,
      total: 0,
      dialogFormVisible: false, //控制模态框
      addForm: {
        id: "",
        name: "",
      },
      formLabelWidth: "150px",
      rules: {
        id: [{ required: true, message: "请输入游客机编号", trigger: "blur" }],
        name: [
          { required: true, message: "请输入责任人名称", trigger: "blur" },
        ],
      },
      editShow: false,
      row: {},
    };
  },

  mounted() {
    this.InitEcharts();
    this.getData();
  },
  created() {
    this.getNormal(this.current, this.size, this.tourInput);
  },
  methods: {
    // 选择不同标题添加样式
    selectTitle(index) {
      this.ckTitle = index;
      if (index == 1) {
        // this.$router.replace({ path: "/tourGuide/abnormal" });
        this.$router.replace({ name: "1-4-2" });
      }
    },
    // 新增
    addInfo() {
      this.dialogFormVisible = true;
      this.addForm = {
        id: "",
        name: "",
      };
    },
    // 新增确定
    async addSubmit() {
      if (this.addForm.id && this.addForm.name) {
        let res = await addDevice(this.addForm.id, this.addForm.name);
        if (res.data.code == 200) {
          this.getNormal(this.current, this.size, this.tourInput);
          // 113修改
          this.getData();
          this.$message({
            message: res.data.message,
            type: "success",
          });
        } else {
          this.$message.error(res.data.message);
        }
        this.dialogFormVisible = false;
      }
    },
    // 修改
    async editStates(row) {
      this.row = row;
      this.editShow = !this.editShow;
    },
    sendMsg(args) {
      args && this.getNormal(this.current, this.size, this.tourInput);
    },
    // 游客机列表详情
    async getNormal(current, size, tourInput) {
      let res = await tourList(current, size, tourInput);
      this.total = res.data.data.total;
      this.tableData = res.data.data.VisitorMachineCommonList.map((item) => {
        if (item.visitorStatus == 1) {
          item.visitorStatus = "使用中";
        } else if (item.visitorStatus == 2) {
          item.visitorStatus = "闲置";
        } else if (item.visitorStatus == 3) {
          item.visitorStatus = "遗失";
        } else {
          item.visitorStatus = "维修";
        }
        return {
          visitorNumber: item.visitorNumber,
          visitorTime: item.visitorTime,
          visitorStatus: item.visitorStatus,
          visitorPerson: item.visitorPerson,
          visitorId: item.visitorId,
        };
      });
    },
    // input回车事件:根据游客机查询
    querybyNum(e) {
      if (e.keyCode == 13) {
        this.getNormal(this.current, this.size, this.tourInput);
      }
    },
    // clear事件
    cancel() {
      this.tourInput = null;
      this.current = 1;
      this.getNormal(this.current, this.size, this.tourInput);
    },
    // 自定义事件
    send(args) {
      if (typeof args == "object") {
        this.current = args.data;
      } else {
        this.size = args;
      }
      this.getNormal(this.current, this.size, this.tourInput);
    },
    async getData() {
      // 获取echarts数据
      let res = await getAllStatus();
      this.echartsData = res.data.data.AllStatusList;
      this.updateChart();
    },

    //初始化echarts
    InitEcharts() {
      this.chart = echarts.init(this.$refs.main);
    },
    //echarts数据处理
    updateChart() {
      let total = 0;
      this.echartsData.forEach((item) => {
        total += item.statusNumber;
      });
      let chartData = this.echartsData.map((item) => {
        switch (item.visitorStatus) {
          case "1":
            item.visitorStatus = `使用中    ${
              ((item.statusNumber / total) * 100).toFixed(1) + "%"
            }      ${item.statusNumber}`;
            break;
          case "2":
            item.visitorStatus = `闲置      ${
              ((item.statusNumber / total) * 100).toFixed(1) + "%"
            }      ${item.statusNumber}`;
            break;
          case "3":
            item.visitorStatus = `遗失      ${
              ((item.statusNumber / total) * 100).toFixed(1) + "%"
            }      ${item.statusNumber}`;
            break;
          default:
            item.visitorStatus = `维修     ${
              ((item.statusNumber / total) * 100).toFixed(1) + "%"
            }      ${item.statusNumber}`;
            break;
        }
        return {
          value: item.statusNumber,
          name: item.visitorStatus,
        };
      });
      let option = {
        title: {
          show: true,
          text: `设备总计 \n \n${total}`,
          x: "center",
          y: "center",
        },
        tooltip: {
          trigger: "item",
        },
        legend: {
          top: "25%",
          right: "right",
        },
        series: [
          {
            name: "设备统计",
            type: "pie",
            radius: ["50%", "70%"],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: "left",
            },
            emphasis: {
              label: {
                show: true,
                fontSize: 12,
                fontWeight: "bold",
              },
            },
            labelLine: {
              show: false,
            },
            data: chartData,
          },
        ],
      };
      option && this.chart.setOption(option, true);
      window.addEventListener("resize", () => {
        this.chart.resize();
      });
    },
  },
};
</script>

<style  scoped lang="scss">
#normal {
  .title {
    display: flex;
    width: 200px;
    height: 30px;
    text-align: center;
    line-height: 30px;
    border-radius: 4px;
    font-size: 14px;
    .title-item {
      width: 50%;
      height: 100%;
      color: #1890ff;
      border-radius: 4px;
      border: 1px solid #94ccff;
      cursor: pointer;
    }
  }
  .echarts {
    width: 50%;
    height: 30vh;
  }
  .table {
    border-top: 5px solid #e5e5e5;
    padding-top: 15px;
    .query {
      margin: 10px 0;
      display: flex;
      align-items: center;
      .query-title {
        font-size: 14px;
        color: #505050;
        margin-right: 10px;
      }
      .el-input {
        width: 20%;
      }
    }
    .tableShow {
      margin: 10px 0;
    }
  }
  .el-dialog {
    .el-input {
      width: 60%;
    }
  }
}
.el-pagination {
  text-align: center;
  margin-top: 10px;
}
.active {
  color: white !important;
  background-color: #1890ff;
}
</style>